<template>
	<pageFramework>
		<view class="content">
			<view class="groupBthBox">
				<view class="groupBth">
					<waves :class="['groupBthItem', groupCurrent === index ? 'groupActivate' : '']"
						v-for="item, index in groupList" :key="'group' + index" @onTap="onTapGroup(item, index)">
						{{ item.name }}
					</waves>
				</view>
			</view>
			<view class="modal">
				<template v-if="groupCurrent === 0">
					<myTable v-model="page" :headers="headers" :tableData="list" :total="total" @change="changeReceive">
					</myTable>
					<waves @onTap="onClickToReceive" class="toReceive">{{$t('Page.user.yjlq')}}</waves>
					<view class="tips">
						{{$t('Page.user.zdmtj')}}
					</view>
				</template>
				<template v-if="groupCurrent === 1">
					<myTable v-model="page2" :headers="headers2" :tableData="list2" :total="total2"
						@change="changeReceive2">
						<template :slot="`time${index}`"
							v-for="(item, index) in list2">{{ timeFormat(item.createtime, 'hh:MM yyyy/mm/dd')  }}</template>
					</myTable>
				</template>
			</view>
		</view>
	</pageFramework>
</template>

<script>
	import {
		sendMessage
	} from '@/api/websocket.js'
	import {
		timeFormat
	} from '@/utils/function/index.js'
	export default {
		data() {
			return {
				timeFormat,
				// 数据总量
				page: 1,
				page2: 1,
				total: 0,
				total2: 0,
				headers: {
					gameName: this.$t('Page.user.cd'),
					validAmount: this.$t('Page.user.tzje'),
					// rate: this.$t('Page.user.sd'),
					settledAmount: this.$t('Page.user.jj'),
				},
				headers2: {
					time: this.$t('Page.user.sj'),
					money: this.$t('Page.user.jj'),
					remark: this.$t('Page.user.xq'),
				},
				list: [],
				list2: [],
				groupCurrent: 0,
				groupList: [{
					name: this.$t('Page.user.cx')
				}, {
					name: this.$t('Page.user.jilu')
				}]
			}
		},
		onLoad() {
			this.pageInit()
		},
		methods: {
			onClickToReceive() {
				const {
					RECYCLE
				} = this.$api
				sendMessage({
					flag: RECYCLE,
					content: {
						type: 2
					}
				})
				uni.$once(RECYCLE, (e) => {
					uni.showToast({
						icon: 'none',
						title: e.msg
					})
					if (e?.code === 1) {

					}
				})
			},
			onTapGroup(item, index) {
				this.groupCurrent = index
				if (index === 0) {
					this.page = 1
					this.callGamelog()
				} else if (index === 1) {
					this.page1 = 1
					this.callMycharge()
				}

			},
			pageInit() {
				this.callGamelog()
			},
			callGamelog() {
				const {
					GAMELOG
				} = this.$api
				sendMessage({
					flag: GAMELOG,
					content: {
						page: this.page,
						dealstatus: 0
					}
				})
				uni.$once(GAMELOG, (e) => {
					if (e?.code === 1) {
						this.total = e.data.count
						this.list = e.data.list
					}
				})
			},
			callMycharge() {
				const {
					MONEYLOG
				} = this.$api
				sendMessage({
					flag: MONEYLOG,
					content: {
						page: this.page2,
						memo: 10
					}
				})
				uni.$once(MONEYLOG, (e) => {
					if (e?.code === 1) {
						this.total2 = e.data.count
						this.list2 = e.data.list
					}
				})
			},
			changeReceive(e) {
				this.callGamelog()
			},
			changeReceive2(e) {
				this.callMycharge()
			}
		}
	}
</script>

<style lang="less" scoped>
	.content {
		padding: 16px 32px;
		display: flex;
		flex-direction: column;
		justify-content: center;
		max-width: 1200px;
		margin: 0 auto;

		.groupBthBox {
			width: 100%;
			display: flex;
			position: relative;
			justify-content: center;
			align-items: center;

			.groupBth {
				padding: 4px 4px;
				margin: 8px 8px;
				background: #242a32;
				display: flex;
				border-radius: 28px;
				box-shadow: 0 1px 5px rgba(0, 0, 0, 0.2), 0 2px 2px rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12);
				min-height: 2.572em;

				.groupBthItem {
					border-radius: 28px !important;
					margin-top: 1px;
					font-size: 1em;
					padding: 0 16px;
					color: #fff;
					display: flex;
					justify-content: center;
					align-items: center;
				}

				.groupActivate {
					background: #2b333b;
				}
			}
		}

		.modal {
			background: #1e232a;
		}

		.toReceive {
			width: 60%;
			margin: 10px auto 0;
			background: #33c38f;
			min-height: 2.572em;
			display: flex;
			justify-content: center;
			align-items: center;
			color: #FFF;
			border-radius: 3px;
		}

		.tips {
			margin-left: 8px;
			margin-top: 16px;
			color: #4caf50;
		}

	}
</style>